<template>
    <el-dialog :title="title" :visible.sync="showModel" min-width="800px" :close-on-click-modal="false">
        <div>
            <el-form :rules="rules" :model="ruleForm" v-loading="loading" ref="authRuleForm" label-width="120px"
                @submit.native.prevent>
                <el-form-item label="母物理房型" prop="motherValue">
                    <el-select v-model="ruleForm.motherValue" filterable placeholder="请选择">
                        <el-option v-for="item in motherValue_option" :key="item.masterBasicRoomId"
                            :label="item.basicRoomName" :value="item.masterBasicRoomId">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="锦江酒店房型" prop="jinjiangValue">
                    <el-select v-model="ruleForm.jinjiangValue" filterable placeholder="请选择">
                        <el-option v-for="item in jinjiangValue_option" :key="item.roomTypeCode"
                            :label="item.roomTypeName" :value="item.roomTypeCode">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-form>
        </div>
        <div class="footer-button">
            <el-button @click="turnOff">取消</el-button>
            <el-button type="primary" @click="submitHandler('authRuleForm')" :loading="btnloading">确认</el-button>
        </div>

    </el-dialog>
</template>
<script>
import { getmasterBasicRoomTypeList, gethotelRoomTypeList,setsubBasicRoomTypeSave } from '@/api/hotel'
export default {
    data() {
        return {
            ruleForm: {
                motherValue: '',
                jinjiangValue: '',
            },
            rules: {
                motherValue: [
                    { required: true, message: '请选择母物理房型', trigger: 'change' }
                ],
                jinjiangValue: [
                    { required: true, message: '请选择锦江酒店房型', trigger: 'change' }
                ],
            },
            btnloading:false,
            loading: true,
            room_quantity_source: 1,
            motherValue: '',
            jinjiangValue: '',
            motherValue_option: [],
            jinjiangValue_option: [],
        };
    },
    props: {
        show: {
            default: false,
            type: Boolean
        },
        type: {
            default: 'setTime',
            type: String
        },
        authData: {
            default: () => { },
            type: Object
        }
    },
    computed: {
        showModel: {
            get() {
                return this.show;
            },
            set(val) {
                this.$emit('update:show', val);
            }
        },
        title() {
            return '新增子物理房型';
        }
    },
    async created() {
        console.log(this.authData);
        this.room_quantity_source = this.authData.room_quantity_source || 1;
        let masterBasicRoomTypeList = await getmasterBasicRoomTypeList({ hotel_id: this.authData.hotel_id });
        let hotelRoomTypeList = await gethotelRoomTypeList({ hotel_id: this.authData.hotel_id });
        if (masterBasicRoomTypeList.code == 0) {
            this.motherValue_option = masterBasicRoomTypeList.data;
        }
        if (hotelRoomTypeList.code == 0) {
            this.jinjiangValue_option = hotelRoomTypeList.data;
        }
        this.loading = false;
        console.log(masterBasicRoomTypeList);
        console.log(hotelRoomTypeList);
    },
    methods: {
        turnOff() {
            this.showModel = false;
        },
        submitHandler(form) {            
            this.$refs[form].validate(async (valid) => {
                if (valid) {      
                    this.btnloading=true;              
                    try {                        
                        let res = await setsubBasicRoomTypeSave({ hotel_id: this.authData.hotel_id, master_basic_room_type_id: this.ruleForm.motherValue, room_type_code: this.ruleForm.jinjiangValue });
                        this.$emit('update', res)
                        this.btnloading=false;
                        this.turnOff();
                    } catch (error) {
                        console.log(error);
                        this.btnloading=false;
                    }
                } else {
                    return false;
                }
            });
           
        },
    },

}
</script>
<style lang="scss" scoped>
.main {
    padding: 0 0px 0 20px;
}

.footer-button {
    margin-top: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}
</style>